<style include="cr-page-host-style cr-shared-style network-shared
    iron-flex">
  cr-policy-network-indicator-mojo {
    margin-inline-end: 10px;
  }

  .cr-row cr-button + cr-button {
    margin-inline-start: 8px;
  }

  .title {
    font-size: 107.69%;  /* 14px / 13px */
    font-weight: 500;
    margin-inline-start: 20px;
  }

  #networkState[connected] {
    color: var(--cros-text-color-positive);
  }
</style>

<!-- Title section: Icon + name + connection state. -->
<div id="title" class="cr-row first">
  <network-icon
      show-technology-badge="[[showTechnologyBadge_]]"
      network-state="[[getNetworkState_(managedProperties_)]]">
  </network-icon>
  <div id="networkName" class="title">
    [[getNameText_(managedProperties_)]]
  </div>
  <div id="networkState" class="title flex"
      connected$="[[isConnectedState_(managedProperties_)]]">
    [[getStateText_(managedProperties_)]]
  </div>
  <cr-button on-click="onForgetTap_"
      hidden$="[[!showForget_(managedProperties_)]]"
      disabled="[[disabled_]]">
    $i18n{networkButtonForget}
  </cr-button>
  <cr-button id="connectDisconnect"
      class="action-button" on-click="onConnectDisconnectClick_"
      hidden$="[[!showConnectDisconnect_(managedProperties_)]]"
      disabled="[[!enableConnectDisconnect_(managedProperties_, disabled_)]]">
    [[getConnectDisconnectText_(managedProperties_)]]
  </cr-button>
</div>

<template is="dom-if" if="[[showConfigurableSections_]]" restamp>
  <!-- SIM Info (Cellular only). -->
  <template is="dom-if" if="[[showCellularSim_(managedProperties_)]]"
      restamp>
    <div class="cr-row">
      <network-siminfo class="flex"
          network-state="[[getNetworkState_(managedProperties_)]]"
          device-state="[[deviceState_]]"
          disabled="[[disabled_]]">
      </network-siminfo>
    </div>
  </template>

  <!-- Choose Mobile Network (Cellular only) -->
  <template is="dom-if"
      if="[[showCellularChooseNetwork_(managedProperties_)]]">
    <div class="cr-row">
      <network-choose-mobile class="flex" device-state="[[deviceState_]]"
          managed-properties="[[managedProperties_]]"
          disabled="[[disabled_]]">
      </network-choose-mobile>
    </div>
  </template>

  <!-- APN (Cellular only) -->
  <template is="dom-if" if="[[isCellular_(managedProperties_)]]">
    <div class="cr-row">
      <network-apnlist class="flex" editable on-apn-change="onApnChange_"
          managed-properties="[[managedProperties_]]"
          disabled="[[disabled_]]">
      </network-apnlist>
    </div>
  </template>

  <!-- Proxy -->
  <div class="hr">
    <template is="dom-if"
        if="[[shouldShowProxyPolicyIndicator_(managedProperties_)]]">
      <div class="cr-row continuation">
        <cr-policy-network-indicator-mojo
            property="[[managedProperties_.proxySettings.type]]">
        </cr-policy-network-indicator-mojo>
        <div>$i18n{networkProxyEnforcedPolicy}</div>
      </div>
    </template>
    <div class="cr-row continuation">
      <network-proxy class="flex" use-shared-proxies
          on-proxy-change="onProxyChange_"
          managed-properties="[[managedProperties_]]"
          editable="[[!disabled_]]">
      </network-proxy>
    </div>
  </div>

  <template is="dom-if" if="[[isRememberedOrConnected_(managedProperties_)]]">
    <!-- IP Config -->
    <div class="cr-row">
      <network-ip-config class="flex"
          editable on-ip-change="onIPConfigChange_"
          managed-properties="[[managedProperties_]]"
          disabled="[[disabled_]]">
      </network-ip-config>
    </div>

    <!-- Nameservers -->
    <div class="cr-row">
      <network-nameservers class="flex" editable
          on-nameservers-change="onIPConfigChange_"
          managed-properties="[[managedProperties_]]"
          disabled="[[disabled_]]">
      </network-nameservers>
    </div>
  </template>

  <div class="cr-row">
    <!-- MAC Address. -->
    <div class="property-box single-column two-line"
        hidden$="[[!deviceState_.macAddress]]">
      <div>$i18n{OncMacAddress}</div>
      <div class="secondary">[[deviceState_.macAddress]]</div>
    </div>
  </div>

  <!-- Other properties to show if present. -->
  <template is="dom-if" if="[[hasInfoFields_(managedProperties_)]]">
    <div class="cr-row continuation">
      <network-property-list-mojo class="flex"
          fields="[[getInfoFields_(managedProperties_)]]"
          property-dict="[[managedProperties_]]"
          disabled="[[disabled_]]">
      </network-property-list-mojo>
    </div>
  </template>
</template>